<template>
	<view>
		<cu-custom  bgColor="bg-white" :isBack="true"><block slot="content">商品详情</block></cu-custom>
		<view class="swiper-box overHidden">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper,index) in goods.gallery_list" :key="swiper.sort">
					<image :src="swiper.big" :data-src="swiper.big" @tap="ViewImage" :data-url="index"></image>
				</swiper-item>
			</swiper>
			<view class="indicator" v-if="goods['gallery_list'].length">{{currentSwiper+1}}/{{goods['gallery_list'].length}}</view>
		</view>
		<view class="cu-bar bg-white padding">
			<view class="flex-column" style="width: 100%;">
				<view class="flex align-center">
					<text class="text-sm cu-tag line-theme margin-right-sm" v-if="goods.label_id">{{ tagVaild(goods.label_id)}}</text>
					<text class="text-lg text-bold">{{goods.goods_name}}</text>
				</view>
				<view class="flex align-center justify-between margin-top-sm">
					<view class="flex align-center">
						<text class="text-lg border-title text-theme text-bold" v-if="goods.price">￥{{goods.price|formatPrice}}</text>
						<text class="text-sm wq-linethrough margin-left-sm" v-if="goods.mktprice">￥{{goods.mktprice | formatPrice }}</text>
					</view>
					<view class="flex align-center" @tap="collectGoods">
						<image style="width: 30rpx;height:30rpx;" :src="izCollect?'../../static/images/icon_cellection_cur.png':'../../static/images/icon_cellection.png'" mode=""></image>
						<text class="text-df" style="margin-left: 10rpx;">收藏</text> 
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white margin-top-sm" @tap="handleSku">
			<view class="action">
				<text class="text-grey">已选</text>
			</view>
			<view class="content flex">
				<text class="text-cut text-df" v-if="selectedSku!=''">{{selectedSku | formatterSkuSpec}}</text>
				<text class="text-black text-df" v-else>请选择 </text>
			</view>
			<view class="action">
				<view class="flex align-center">
					<text class="cuIcon-title icon_dot" :class="index==1?'text-black':'text-grey'" v-for="(item,index) in 3" :key="index"></text>
				</view>
			</view>
		</view>
		<!-- <view class="cu-bar bg-white margin-top-sm"  @tap="showModal">
			<view class="action">
				<text class="text-grey">参数</text>
			</view>
			<view class="content flex">
				<view class="flex text-black text-df margin-right-sm" v-for="(item,index) in goodsParams" :key="index">
					<text>{{item.param_name}}</text>
					<text>{{item.param_value}}</text>  
				</view>
			</view>
			<view class="action">
				<view class="flex align-center">
					<text class="cuIcon-title icon_dot" :class="index==1?'text-black':'text-grey'" v-for="(item,index) in 3" :key="index"></text>
				</view>
			</view>
		</view> -->
		<view class="cu-list menu bg-white margin-top-sm margin-bottom-sm"  v-if="goodCommentList.data_total>0">
			<view class="flex justify-between align-center padding" v-if="goodCommentList">
				<text class="title">宝贝评价 ({{goodCommentList.data_total}})</text>
				<view class="wq-icon-orange flex justify-end align-center" @tap="moreComment">
					<text class="text-sm">{{goodCommentList.data_total>0?'查看更多':''}}</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<!-- <view class="flex justify-between align-center padding" v-else>
				<text class="text-sm">暂无评论</text>
			</view> -->
			<view class="cu-item margin-top" v-for="(item,index) in goodCommentList.data" :key="index">
				<view class="cu-avatar round lg margin-right-sm" :style="'background-image:url('+item.member_face+');'">
				</view>
				<view class="content">
					<view class="text-grey">
						<view class="text-cut">{{item.member_name}}</view>
						<image src="../../static/images/icon_level3.png" style="width: 35rpx;height: 60rpx;" mode="aspectFit"></image>
					</view>
					<view class="text-gray text-sm flex">
						{{item.create_time}}
					</view>
				</view>
			</view>
			<view class="bg-white padding  padding-top-sm padding-bottom-sm" style="line-height: 40rpx;">
				<view>{{item.content}}</view>
			</view>
			<view class="bg-white margin-top-sm padding" style="padding-top:0"  v-if="item.reply || item.view_count">
				<view class="flex align-center justify-between">
					<view class="text-sm text-cut"> 浏览{{item.view_count || 0}}次 </view>
					<view class="flex align-center">
					   <!-- <view class="flex align-center margin-right-sm">
					        <image src="../../static/images/icon_prise_cur.png" class="commment-icon" mode=""></image>
					        <text class="text-sm text-cut">{{item.thumb_up || 0}}</text>
					    </view> -->
					    <view class="flex align-center">
					        <image src="../../static/images/icon_comment.png" class="commment-icon" mode=""></image>
					        <text class="text-sm text-cut margin-left-sm">{{item.reply.length || 0}}</text>
					    </view>
					</view>                    
				</view>
			</view>
		</view>
		<view class="cu-list menu bg-white margin-top-sm margin-bottom-sm padding-xl" v-else>
			<view class="flex-1 flex justify-center align-center">
				<text>暂无评论</text>
			</view>
		</view>
		<view class="cu-bar bg-white"  :class="isFixed?'fixed':''" id="navbar" :style="isFixed?'margin-top:'+CustomBar+'px':''">
			<view class="nav" style="width: 80%; margin: 0 auto;">
				<view class="flex text-center">
					<view class="cu-item flex-sub":class="index==active?'text-theme cur':''" v-for="(item,index) in menu" :key="index" @tap="changeTab" :data-id="index">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="description" id="description" v-if="active===0">
			<view class="content">
				<view class="grace-rich-text" v-if="demoHtml">
				    <rich-text type="text" :nodes="demoHtml"></rich-text>
				</view>
				<view class="padding" v-else style="min-height: 100rpx;">
				   <text>暂无相关数据</text>
				</view>
			</view>
		</view>
		<view v-if="active ===1" style="min-height: 400px">
			<GoodsParams v-if="goods.param_list" :goodsParams="goods.param_list"></GoodsParams>
			<view class="padding" v-else style="min-height: 100rpx;">
			   <text>暂无相关数据</text>
			</view>
		</view>
		<view v-else style="min-height: 100rpx">
		</view>
		<goodSku
		  :show="popupShow"
		  :theme-color="themeColor"
		  :combinations="combinations"
		  :specifications="specifications"
		  :default-select-index="selectedIndex"
		  :combinations-props="combinationsProps"
		  @close="handleClose"
		  @confirm="handleConfirm"
		  @joinCart="joinCart"
		></goodSku>
		<view class="cu-modal bottom-modal " :class="showParamsModal?'show':''" v-if="goods.param_list">
			<view class="cu-dialog radius">
				<view class="cu-bar bg-white">
					<view class="action"></view>
					<view class="action text-333 cuIcon-close text-lg" style="font-size: 30rpx;" @tap="hideParamsModal()"></view>
				</view>
				<GoodsParams v-if="goods.param_list" :goodsParams="goods.param_list"></GoodsParams>
				<view style="height: 130rpx;"></view>
				<view class="flex">
					<view class="cu-btn bg-theme lg" style="position:fixed;bottom:0;width: 100%; border-radius: 0;" @tap="hideParamsModal()">
						<text class="text-xl">关闭</text>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar foot border shop ">
			<button open-type='share' class="action" @tap="share">
				<image class="bar-icon" src="../../static/images/icon_share.png" mode="scaleToFill"></image>
				<view class="text-xs" style="margin-top:6rpx;">分享</view>
			</button>
			<view class="action" @tap="customeService">
				<image class="bar-icon" src="../../static/images/icon_customer_service.png" mode="scaleToFill"></image>
				<view class="text-xs" style="margin-top:6rpx;">客服</view>
			</view>
			<view class="action"  @tap="GotoCart">
				<image class="bar-icon" src="../../static/images/icon_cart.png" mode="scaleToFill">
					<view class="cu-tag badge" style="position: relative;margin-left: -20rpx;top: -24rpx;" v-if="cartNum>0">{{cartNum}}</view>
				</image>
				<view class="text-xs" style="margin-top:6rpx;">购物车</view>
			</view>
			<view class="btn-group flex align-center justify-center" style="height: 100%;">
				<view class="cu-capsule round" style="height:80%;width: 100%;">
					<view class='cu-tag bg-join-cart' style="height: 100%;width: 50%;" @tap="handleSku">
						<text class="text-df text-white padding">加入购物车</text>
					</view>
					<view class="cu-tag bg-theme" style="height: 100%;width: 50%;">
						<text class="text-df text-white padding" @tap="handleSku">立即购买</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Goods_API from '@/api/goods.js'
	import * as Cart_API from '../../api/cart.js'
	import * as Checkout_API from '@/api/checkout.js'
	import * as User_API from '@/api/user.js'
	import graceRichText from '@/common/richText.js'
	import goodSku from '@/components/echone-sku/echone-sku.vue'
	import GoodsParams from '@/components/goods/GoodsParams.vue'
	import GoodsChart from '@/components/goods/echart.vue'
	
	export default {
		components:{
			goodSku,
			GoodsParams,
			GoodsChart
		},
		data() {
			return {
				goods_id:null,
				goods:{},
				cartNum:0,
				buyGoodsNum:1,
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				showTop:false,//异常
				//轮播主图数据
				swiperList: [],
				//轮播图下标
				currentSwiper: 0,
				selectedSku:'',
				demoHtml:'',
				izCollect:false,
				popupShow:false,
				themeColor:'#CB1414',
				selectedIndex:0,
				combinations:[],//规格集合
				specifications:[],// 规格值
				active:0, //tab选项卡
				isFixed:false,// tab是否置顶
				navbarInitTop:0,
				menu:[
					{name:'商品详情'},
					{name:'商品参数'}
				],
				CustomBar: this.CustomBar,
				params:{
					page_no:1,
					page_size:20
				},
				goodCommentList:{},
				hasComment:false,
				hasLogin:false,
				// hideModal:false,
				showParamsModal:false,
				goodsParams:[],
				titieFixBottom :0
			};
		},
		onLoad(e) {
			if(e.goods_id){
				// console.log('商品id=', e.goods_id)
				this.goods_id = e.goods_id
			}
			// this.goods_id = 480
			this.GetGoodsDetail(this.goods_id)
			this.GET_GoodsCommentList(this.goods_id)
			this.GET_GoodsSku(this.goods_id)
			this.Check_GoodsCollect(this.goods_id)
			// this.customeService()
			// setTimeout(() =>{
			// 	this.moreComment()
			// },1000)
			if(e.sharePhone){
				uni.removeStorage('referrer')
				uni.setStorageSync('referrer',{'phone':e.sharePhone})
			}
		},
		onShow() {
			if(uni.getStorageSync('userInfo')){
				this.hasLogin = true
			}else{
				this.hasLogin = false
			}
			if (this.navbarInitTop == 0) {
				wx.createSelectorQuery().select('#navbar').boundingClientRect((rect) => {
					if (rect && rect.top > 0) {
						var navbarInitTop = rect.top;
						this.navbarInitTop = navbarInitTop
					}
				}).exec();
			}
		},
		onPageScroll(e) {
		    var scrollTop = e.scrollTop;
		    var isSatisfy = scrollTop >= this.navbarInitTop-this.CustomBar;
			if (this.isFixedTop == isSatisfy) {
			      return false;
			    }else {
			      this.isFixed = isSatisfy
			    }
		},
		methods:{
			share(){
				wx.showShareMenu({
				    withShareTicket: true
				})
			},
			onShareAppMessage() {
				let phone = uni.getStorageSync('userInfo').mobile
				let user = uni.getStorageSync('userInfo').nickname
				let shop_id = uni.getStorageSync('shop').shop_id
				let title = ''
				let path = ''
				if(phone && shop_id){
					title = user + '分享的'+this.goods.goods_name+'等你抢购'
					path = '/pages/goods/index?goods_id='+this.goods.goods_id+'&sharePhone='+phone+'&shop_id='+shop_id
				}else if(shop_id){
					title = this.goods.goods_name+'等你抢购'
					path = '/pages/goods/index?goods_id='+this.goods.goods_id+'&shop_id='+shop_id
				}
				console.log(path)
			    return {
					imageUrl: this.goods.gallery_list[0],
					title: title,
					path: path
			    }
			},	
			// 商品查询
			GetGoodsDetail(goods_id){
				Goods_API.GetGoodsDetail(goods_id).then(res =>{
					this.goods = res
					this.demoHtml = graceRichText.format(res.intro);
					res.gallery_list.map(item =>{
						this.swiperList.push(item.big)
					})
					if(res.param_list && res.param_list.length){
						let goodsParams = res.param_list[0]
						let goods_params = goodsParams['params']
						let paramsList =[]
						if(goods_params){
							goods_params.map(item =>{
								if(item.param_name === '年份' || item.param_name === '酒精度'){
									paramsList.push(item)
								}
							})
							this.goodsParams = paramsList
						}
					}
				})	
			},
			// 查询商品规格
			GET_GoodsSku(goods_id){
				let that = this
				Goods_API.goodsSku(goods_id).then(res =>{
					this.selectedSku = res[0] || ''
					this.sku_id = res[0].sku_id
					that.sku_list = res
					this.specifications = res
					this.combinations = res
				})
			},
			GET_GoodsCommentList(goods_id){
				if(uni.getStorageSync('token')){
					Goods_API.getGoodsCommentList(goods_id,this.params).then(res=>{
						if(res.data){
							this.goodCommentList = res
							this.hasComment = true
						}else{
							this.hasComment = false
						}
					})
				}
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.swiperList,
					current: e.currentTarget.dataset.url
				});
			},
			tagVaild(label_id) {
			    let goodstags = null
			    if (label_id) {
			        goodstags = JSON.parse(label_id)
			        let Tags = goodstags
			          .map(item => {
			            return item.labelName
			          })
			          .toString()
			        return Tags
			    }
			},
			Check_GoodsCollect(goods_id){
				if(uni.getStorageSync('userInfo')){
					User_API.checkCollection(goods_id).then(res =>{
						if(res.message){
							this.izCollect = true
						}else{
							this.izCollect = false
						}
					})
				}
			},
			// 收藏商品
			collectGoods(){
				let params = {
					goods_id : this.goods_id
				}
				if(!this.izCollect){
					User_API.addGoodCollection(params).then(res =>{
						if(res.goods_id){
							this.izCollect = !this.izCollect
						}
					})
				}else{
					User_API.delCollectionGood(this.goods_id).then(res =>{
						this.izCollect = !this.izCollect
					})
				}
			},
			handleSku(){
				// console.log('open sku')
				this.popupShow = true
			},
			handleClose(e){
				if(e.count){
					this.selectedSku = e
				}
				this.popupShow = false
			},
			handleConfirm(e){
				console.log('e',e)
				if(e.count){
					this.selectedSku = e
				}
				this.popupShow = false
				let {sku_id,count} = this.selectedSku
				let params = {
					sku_id:sku_id,
					num:count
				}
				if(this.hasLogin){
					Cart_API.Buy(params).then(res =>{
						let params = {
							sellerId : uni.getStorageSync('shop').shop_id
						}		
						Cart_API.GetAllCart(params).then(res =>{
							Checkout_API.getCheckoutChecked(params).then(res1 =>{
								let CartData = res1
								uni.setStorage({
									key:'buylist',
									data:CartData,
									success: () => {
										uni.navigateTo({
											url:'../order/orderComfirm'
										})
									}
								})
							})			
						})
						// Cart_API.GetCartDetail().then(res =>{
						// 	console.log('111111',res)
						// 	if(res.cart_list.length<1){
						// 		return
						// 	}else{
						// 		let params = {
						// 			sellerId : uni.getStorageSync('shop').shop_id
						// 		}
						// 		console.log('params===',params)
						// 		Checkout_API.getCheckoutChecked(params).then(res =>{
						// 			let CartData = res
						// 			uni.setStorage({
						// 				key:'buylist',
						// 				data:CartData,
						// 				success: () => {
						// 					uni.navigateTo({
						// 						url:'../order/orderComfirm'
						// 					})
						// 				}
						// 			})
						// 		})
						// 	}
						// })
					})
				}else{
					uni.navigateTo({url:'/pages/login/login'})
				}
			},
			joinCart(e){
				console.log('join cart', e)
				if(e.count){
					this.selectedSku = e
				}
				this.popupShow = false
				console.log('this.selectedSku', this.selectedSku)
				let {sku_id,count} = this.selectedSku
				let params = {
					sku_id:sku_id,
					num:count
				}
				Cart_API.AddCart(params).then(res =>{
					uni.showModal({
						title: '温馨提示',
						content: '你已将商品加入购物车，你要去看看吗?',
						cancelText: '下次再说',
						confirmText: '去看看吧',
						success: res => {
							if (res.confirm) {
								uni.switchTab({url:'../cart/cart'})
							}
						}
					})
				})
			},
			changeTab(e){
				this.active = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},	
			moreComment(){
				if(uni.getStorageSync('token')){
					if(this.goods){
						uni.setStorageSync('commentGoods',this.goods)
						uni.navigateTo({
							url:'./comment/list?goods_id='+this.goods_id
						})
					}
				}else{
					uni.navigateTo({
						url:'../login/login'
					})
				}
			},
			GotoCart(){
				uni.switchTab({
					url:'../cart/cart'
				})
			},
			showModal(){
				let params = this.goods.param_list[0].params
				if(params.length) {
					this.showParamsModal = true
				}
			},
			hideParamsModal(){
				this.showParamsModal = false
			},
			// 客服
			customeService(){
				if(this.hasLogin){
					if(this.goods){
						uni.setStorage({
							key:'customerServiceInfo',
							data:{
								goods:{
									goods_id:this.goods.goods_id,
									goods_image:this.goods.thumbnail,
									goods_name:this.goods.goods_name,
									goods_price:this.goods.price
								}
							},
							success: () => {
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pages/profile/aftersafe/chat'
									})
								},500)
							}
						})
					}
				}else{
					uni.navigateTo({
						url:'../login/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.swiper-box {
	position: relative;
	width: 100%;
	height: 100vw;
	swiper {
		width: 100%;
		height: 100vw;
		swiper-item {
			image {
				width: 100%;
				height: 100vw;
			}
		}
	}
	.indicator{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
}
.description {
	margin-bottom: 30upx;
	.title {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #999;
		
	}
}
.grace-rich-text{
	padding:10upx 20upx;
}
.bar-icon{
	width: 36rpx;
	height: 36rpx;
}
.icon_dot{
	font-size: 20rpx;
}
.fixed {
	position: fixed;
	z-index: 19999;
	width: 100%;
}
/deep/.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after {
	border-bottom: 0;
}	
</style>
